<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
    <meta name="author" content="Sergey Pimenov and Metro UI CSS contributors">

    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
    <title>Hints :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style</title>

    <link href="css/metro.css" rel="stylesheet">
    <link href="css/metro-icons.css" rel="stylesheet">
    <link href="css/metro-responsive.css" rel="stylesheet">
    <link href="css/metro-schemes.css" rel="stylesheet">

    <link href="css/docs.css" rel="stylesheet">

    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/metro.js"></script>
    <script src="js/docs.js"></script>
    <script src="js/prettify/run_prettify.js"></script>
    <script src="js/ga.js"></script>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

</head>
<body>
    <div class="container page-content">
        <h1><a href="index.html" class="nav-button transform"><span></span></a>&nbsp;Hints</h1>

        @@adsense

        <div class="example" data-text="example">
            <div class="grid">
                <h5>Default</h5>
                <div class="row cells4">
                    <div class="cell debug align-center padding10">
                        <span data-role="hint" data-hint="Title|Hint content">Hint bottom</span>
                    </div>
                    <div class="cell debug align-center padding10">
                        <span data-role="hint" data-hint="Title|Hint content" data-hint-position="top">Hint top</span>
                    </div>
                    <div class="cell debug align-center padding10">
                        <span data-role="hint" data-hint="Title|Hint content" data-hint-position="right">Hint right</span>
                    </div>
                    <div class="cell debug align-center padding10">
                        <span data-role="hint" data-hint="Title|Hint content" data-hint-position="left">Hint left</span>
                    </div>
                </div>
                <h5>Variant 2</h5>
                <div class="row cells4">
                    <div class="cell debug align-center padding10">
                        <span data-role="hint" data-hint-mode="2" data-hint="Title|Hint content">Hint bottom</span>
                    </div>
                    <div class="cell debug align-center padding10">
                        <span data-role="hint" data-hint-mode="2" data-hint="Title|Hint content" data-hint-position="top">Hint top</span>
                    </div>
                    <div class="cell debug align-center padding10">
                        <span data-role="hint" data-hint-mode="2" data-hint="Title|Hint content" data-hint-position="right">Hint right</span>
                    </div>
                    <div class="cell debug align-center padding10">
                        <span data-role="hint" data-hint-mode="2" data-hint="Title|Hint content" data-hint-position="left">Hint left</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="example" data-text="example">
            <div class="grid">
                <h5>Custom colors</h5>
                <div class="row cells4">
                    <div class="cell debug align-center padding10">
                        <span data-role="hint" data-hint-background="bg-green" data-hint-color="fg-white" data-hint-mode="2" data-hint="Title|Hint content">Hint bottom</span>
                    </div>
                    <div class="cell debug align-center padding10">
                        <span data-role="hint" data-hint-background="bg-pink" data-hint-color="fg-white" data-hint-mode="2" data-hint="Title|Hint content" data-hint-position="top">Hint top</span>
                    </div>
                    <div class="cell debug align-center padding10">
                        <span data-role="hint" data-hint-background="bg-red" data-hint-color="fg-white" data-hint-mode="2" data-hint="Title|Hint content" data-hint-position="right">Hint right</span>
                    </div>
                    <div class="cell debug align-center padding10">
                        <span data-role="hint" data-hint-background="bg-blue" data-hint-color="fg-white" data-hint-mode="2" data-hint="Title|Hint content" data-hint-position="left">Hint left</span>
                    </div>
                </div>
            </div>
        </div>

        <h3>How?</h3>
        <p>
            To create <span class="tag info">hint</span> you must add <span class="tag">data-role='hint'</span> to element and add then <span class="tag">data-hint-*</span> attributes to specify behavior.
        </p>

        <div class="example" data-text="code">
            <pre class="prettyprint linenums"><code>
                &lt;span data-role="hint"
                    data-hint-background="bg-green"
                    data-hint-color="fg-white"
                    data-hint-mode="2"
                    data-hint="Title|Hint content"
                &gt;This element with hint&lt;/span&gt;
            </code></pre>
        </div>

        <h3>Attributes</h3>
        <table class="table bordered border">
            <thead>
            <tr>
                <td>Data-*</td>
                <td>Type</td>
                <td>Default value</td>
                <td>Description</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>data-hint</td>
                <td>string</td>
                <td>empty</td>
                <td>Title|Hint text, with <b>|</b> separator</td>
            </tr>
            <tr>
                <td>data-hint-position</td>
                <td>string</td>
                <td>bottom</td>
                <td>Where hint positioning over element [bottom, top, left, right]</td>
            </tr>
            <tr>
                <td>data-hint-mode</td>
                <td>int</td>
                <td>1</td>
                <td>See first example for difference</td>
            </tr>
            <tr>
                <td>data-hint-background</td>
                <td>string</td>
                <td>#FFFCC0</td>
                <td>Hex color value or class for background color</td>
            </tr>
            <tr>
                <td>data-hint-color</td>
                <td>string</td>
                <td>#000000</td>
                <td>Hex color value or class for text color</td>
            </tr>
            <tr>
                <td>data-hint-max-size</td>
                <td>int</td>
                <td>200</td>
                <td>Values for max width of hint</td>
            </tr>
            <tr>
                <td>data-hint-timeout</td>
                <td>int</td>
                <td>0</td>
                <td>If value gt 0 hint hided automatically by timeout</td>
            </tr>
            <tr>
                <td>data-hint-time-delay</td>
                <td>int</td>
                <td>0</td>
                <td>If value gt 0 hint showing after this time</td>
            </tr>
            </tbody>
        </table>
    </div>

    @@hit

</body>
</html>